<!--计量器具 -->
<script>
    import { finPageList } from '@/api/measurDevice'
    import Operation from './components/Operation'
    import FormModal from './components/FormModal'
    export default {
        components: {
            Operation,
            FormModal
        },
        data() {
            return {
                name: '',
                list: [
                    {
                        name: '123',
                        code: '123',
                        energyTypeName: '123',
                    }
                ],
            }
        },
        methods: {
            handleSearch(){
            this.$nextTick(() => {
                const rlTable = this.$refs.rlTable
                if(rlTable){
                    rlTable.onSearchChange()
                }
                })
            },
            loadTableData({ resolve, params }) {
                resolve({
                    records:this.list,
                    total:0
                })
                // const result = { records: [], total: 0 }
                // params.desc = ['create_time']
                // finPageList(params)
                //     .then(({ code, data }) => {
                //         if (code === 200) {
                //             result.records = data.records
                //             result.total = data.total
                //         }
                //         resolve(result)
                //     })
                //     .catch(() => resolve(result))
            },
            handleReset() {
                this.name = ''
                this.virtually = ''
                this.code = ''
                this.typeId = ''
                this.handleSearch()
            },
            addOnClick() {
                new this.$pageModal(
                    FormModal,
                    {
                        props: {
                            title: '新增',
                        },
                    },
                    (result) => {
                        if (result) {
                          const rlTable = this.$refs.rlTable
                          if(rlTable){
                            rlTable.onSearchChange()
                          }
                        }
                    }
                )
            },
        },
    }
</script>
<template>
    <!-- <RlTable :is-pagination="true" @on-change="loadTableData">
        <template #default>
            <el-table-column
                prop="name"
                label="计量器具名称"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                prop="code"
                label="计量器具编码"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                prop="typeName"
                label="计量器具类型"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                prop="virtually"
                label="是否虚拟计量器具"
                :min-width="120"
                :show-overflow-tooltip="true"
            >
                <template slot-scope="scope">{{ scope.row.virtually ? '是' : '否' }}</template>
            </el-table-column>
            <el-table-column
                prop="model"
                label="型号名称"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                prop="brand"
                label="品牌名称"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                prop="containerNumber"
                label="计量器具柜号"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                prop="pointCount"
                label="测点数量"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column
                prop="onlineStatusName"
                label="在线状态"
                :min-width="150"
                :show-overflow-tooltip="true"
            />
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <Operation :rowData="scope.row" />
                </template>
            </el-table-column>
        </template>
        <template #search>
            <SearchContion />
        </template>
        <template #head-left-button>
            <HeaderAction />
        </template>
    </RlTable> -->
    <div class="container">
    <div class="header">
        <el-form inline class="searchItem">
          <div style="display: flex;">
            <el-form-item label="类型名称">
                <el-input
                    v-model="name"
                    size="small"
                    placeholder="请输入类型名称"
                    style="width: 150px;"
                />
            </el-form-item>
            <el-form-item label="是否虚拟计量器具">
                <el-select
                    v-model="virtually"
                    clearable
                    filterable
                    placeholder="请选择"
                    transfer
                    size="small"
                    style="width: 120px;"
                >
                    <el-option
                        v-for="item in virtuallyOptions"
                        :key="item.code"
                        :value="item.code"
                        :label="item.name"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="计量器具编码">
                <el-input
                    v-model="code"
                    size="small"
                    placeholder="请输入计量器具编码"
                    style="width: 150px;"
                />
            </el-form-item>
            <el-form-item label="计量器具类型">
                <el-select
                    v-model="typeId"
                    clearable
                    filterable
                    placeholder="请选择类型"
                    transfer
                    size="small"
                    style="width: 140px"
                >
                    <el-option
                        v-for="item in meterTypeOptions"
                        :key="item.code"
                        :value="item.code"
                        :label="item.name"
                    />
                </el-select>
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-form-item>
                <el-button
                    size="small"
                    type="primary"
                    @click="handleSearch" 
                    icon="el-icon-search"
                    >查询</el-button
                >
                <el-button
                    size="small"
                    type="warning"
                    @click="handleReset"
                    icon="el-icon-refresh-left"
                    >重置</el-button
                >
                <el-button
                    size="small"
                    type="primary"
                    @click="addOnClick" 
                    icon="el-icon-plus"
                    >新增</el-button
                >
            </el-form-item>
          </div>
          </el-form>
      </div>
      <div class="main">
        <RlTable
            :search="false"
            :is-pagination="true"
            @on-change="loadTableData"
            ref="rlTable"
        >
            <template #default>
                <el-table-column
                    prop="name"
                    label="计量器具名称"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="code"
                    label="计量器具编码"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="typeName"
                    label="计量器具类型"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="virtually"
                    label="是否虚拟计量器具"
                    :min-width="120"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">{{ scope.row.virtually ? '是' : '否' }}</template>
                </el-table-column>
                <el-table-column
                    prop="model"
                    label="型号名称"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="brand"
                    label="品牌名称"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="containerNumber"
                    label="计量器具柜号"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="pointCount"
                    label="测点数量"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column
                    prop="onlineStatusName"
                    label="在线状态"
                    :min-width="150"
                    :show-overflow-tooltip="true"
                />
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <Operation :rowData="scope.row" />
                    </template>
                </el-table-column>
            </template>
        </RlTable>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
  color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.header {
  height: 36px;
  background-color: #0C2E64;
  padding: 20px 15px;
  display: flex;
  .searchItem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  margin-bottom: 34px;
}
.main {
  height: calc(100vh - 285px);
  position: relative;
  box-sizing: border-box;
}
::v-deep .el-form-item {
  margin-bottom: 0 !important;
  line-height: 36px !important;
  height: 36px !important;
}
::v-deep .el-form-item__label {
  line-height: 36px !important;
  height: 36px!important;
}
::v-deep .el-form-item__content {
  line-height: 36px !important;
  height: 36px !important;
}
</style>